<template>
  <a-modal v-model:open="visible" :footer="null" :maskClosable="false" v-bind="$attrs" @cancel="handleClosed" :width="800">
    <div class="ant-modal-header">
      <div class="ant-modal-title">{{ title }}</div>
    </div>

    <div class="ant-modal-body" style="min-height: 350px">
      <div style="width: 600px; margin: 10px auto; height: 160px">
        <a-upload-dragger
          name="file"
          class="ant-upload ant-upload-select"
          multiple=""
          :capture="false"
          :showUploadList="false"
          :customRequest="handleUpload"
          :progress="{
            showInfo: false,
          }"
        >
          <p class="ant-upload-drag-icon">
            <Icon icon="ant-design:inbox-outlined" class="upload-icon" style="font-size: 80px; margin-left: 2px; display: inline-flex" />
            <!-- <inbox-outlined :style="{ 'font-size': '16px', display: 'inline-flex' }" /> -->
          </p>
          <p class="ant-upload-text">拖拽文件到这里上传</p>
        </a-upload-dragger>
      </div>
      <div style="text-align: center; margin-top: 30px">
        <a-upload
          name="file"
          class="ant-upload ant-upload-select"
          :showUploadList="false"
          :headers="headers"
          :customRequest="handleUpload"
          :progress="{
            showInfo: false,
          }"
        >
          <a-button :isupload="false">
            <upload-outlined />
            上传文件
          </a-button>
        </a-upload>
        <a-upload directory :customRequest="handleUpload" :showUploadList="false">
          <a-button :isupload="false" style="margin-left: 10px">
            <inbox-outlined />
            上传文件夹
          </a-button>
        </a-upload>
      </div>
      <div style="text-align: center; padding: 10px 0px">
        文件上传到:
        <span v-for="(item, index) in folderPathList" :key="item.fileId">
          {{ (index == 0 ? '' : '/') + item.fileName }}
        </span>
        <span style="margin-left: 10px; color: rgb(30, 136, 229); cursor: pointer" @click="handleOpenFolderSelect">更改</span>
      </div>

      <div v-if="fileList.length > 0">
        <div class="file-list">
          <div class="file-item">
            <div class="file-name">文件</div>
            <div class="file-size">大小</div>
            <div class="file-status">状态</div>
            <div class="file-location">位置</div>
          </div>
        </div>
        <div class="file-content">
          <ul v-for="item in fileList" :key="item.id">
            <li class="file-item">
              <div class="file-name">{{ item.fileName }}</div>
              <div class="file-size">{{ item.fileSize }}</div>
              <div class="file-status"
                >{{ item.status == '成功' || item.status == '失败' ? item.status : item.status + '(' + item.process + '%)' }}
              </div>
              <div class="file-location">{{ item.folderLocal }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </a-modal>
  <FolderSelectModal ref="folderSelectRef" @success="setSelectedFolder" />
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { InboxOutlined, UploadOutlined } from '@ant-design/icons-vue';
  import { uploadFile } from '../files.api';
  import FolderSelectModal from './FolderSelectModal.vue';
  import { cloneDeep } from 'lodash-es';
  import { getFileSize } from '/@/utils/index';

  export default defineComponent({
    name: 'FileUploadModal',
    components: { InboxOutlined, UploadOutlined, FolderSelectModal },
    emits: ['success', 'closed'],
    setup(props, { emit }) {
      const userStore = useUserStore();
      //当前用户ID
      const userId = userStore.getUserInfo.id;

      const folderSelectRef = ref();

      //弹窗显隐标记
      const visible = ref(false);
      //数据信息
      const fileList: any = ref([]);

      const headers = {};
      //标题
      const title = ref();

      //数据信息
      const folderPathList: any = ref([]);

      //显示modal
      function showModal(pathList) {
        visible.value = true;
        title.value = '上传至';
        folderPathList.value = pathList;
        fileList.value = [];
      }

      //打开目录选择
      function handleOpenFolderSelect() {
        const pathList = cloneDeep(folderPathList.value);
        folderSelectRef.value.showModal(title.value, pathList);
      }

      //关闭后的回调
      function handleClosed() {
        visible.value = false;
        emit('closed');
      }

      async function handleChange() {}

      async function handleDrop() {}

      async function handleUpload(item) {
        let file = item.file;
        let folderLocal = '';
        folderPathList.value.forEach((item) => {
          if (folderLocal.length == 0) {
            folderLocal = item.fileName;
          } else {
            folderLocal = folderLocal + '/' + item.fileName;
          }
        });
        let index =
          fileList.value.push({
            fileName: file.name,
            fileSize: getFileSize(file.size),
            process: 0,
            status: '上传中',
            folderLocal: folderLocal,
          }) - 1;
        let params = {
          file: file,
          data: {
            parentId: folderPathList.value[folderPathList.value.length - 1].fileId,
            bizPath: 'manage',
          },
        };
        console.log('aa', params);
        uploadFile(params, (e) => setUploadProcess(e, index)).then(
          (res) => {
            console.log('wang-uploadFile', res);
            if (res.success) {
              //成功处理
              fileList.value[index].process = 100;
              fileList.value[index].status = '成功';
            } else {
              //失败处理
              fileList.value[index].process = 100;
              fileList.value[index].status = '失败';
              console.log(res.msg);
            }
          },
          (err) => {
            //失败处理
            fileList.value[index].process = 100;
            fileList.value[index].status = '失败';
            console.log(err);
          }
        );
      }

      //设置上传进度值
      function setUploadProcess(e, index) {
        let percent = Math.floor((e.loaded / e.total) * 100);
        fileList.value[index].process = percent;
        fileList.value[index].status = '上传中';
      }

      // 目录选择回调
      async function setSelectedFolder(pathList) {
        folderPathList.value = pathList;
      }

      return {
        folderSelectRef,
        visible,
        title,
        fileList,
        folderPathList,
        headers,
        showModal,
        handleClosed,
        handleChange,
        handleDrop,
        handleUpload,
        handleOpenFolderSelect,
        setSelectedFolder,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import '../less/UploadFile';
</style>
